<script setup lang="ts">
import { computed, unref } from 'vue';
import { useLocaleStore } from '@/stores/modules/locale';
import { useLocale } from '@/hooks/web/useLocale';
import { propTypes } from '@/utils/propTypes';
import { Icon } from '@iconify/vue';

defineProps({
  color: propTypes.string.def(''),
  size: propTypes.number.def(18)
});

const localeStore = useLocaleStore();
const langMap = computed(() => localeStore.getLocaleMap);
const currentLang = computed(() => localeStore.getCurrentLocale);
const setLang = (lang: LocaleType) => {
  if (lang === unref(currentLang).lang) {
    return;
  }
  // 需要重新加载页面让整个语言多初始化
  window.location.reload();
  localeStore.setCurrentLocale({ lang });

  const { changeLocale } = useLocale();
  changeLocale(lang);
};
</script>
<template>
  <el-dropdown class="v-locale-dropdown" trigger="click" @command="setLang">
    <el-icon :size="size">
      <Icon icon="ion:language-sharp" class="cursor-pointer" :color="color" />
    </el-icon>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item v-for="item in langMap" :key="item.lang" :command="item.lang">
          {{ item.name }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<style scoped lang="scss">
.cursor-pointer {
  cursor: pointer;
}
</style>
